<template>
  <!-- 报名详情 -->
  <div class="details-container page-container">
    <el-page-header title="返回" @back="handleBack">
      <template #content>
        <h1 size="largez">{{ details_data.name }}报名入口</h1>
      </template>
    </el-page-header>
    <el-divider></el-divider>
    <div class="descriptions-container">
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <!-- <el-icon>
                <user />
              </el-icon> -->
              赛事名称
            </div>
          </template>
          {{ details_data.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <!-- <el-icon>
                <user />
              </el-icon> -->
              比赛地点
            </div>
          </template>
          {{ details_data.economizeName }},{{ details_data.marketName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <!-- <el-icon>
                <user />
              </el-icon> -->
              报名时间
            </div>
          </template>
          {{ details_data.startTime }} 至 {{ details_data.endTime }}

        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <!-- <el-icon>
                <user />
              </el-icon> -->
              赛事编号
            </div>
          </template>
          {{ details_data.eventNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              分组
            </div>
          </template>
          {{ group_name }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="content-container">
      <div class="content-heder-container">
        <el-text>参与参赛人员名单</el-text>
        <el-space>
          <el-input clearable v-model="query_data.studentName" placeholder="搜索姓名" size="large"></el-input>
          <el-input clearable v-model="query_data.phone" size="large" placeholder="搜索手机号"></el-input>
          <el-select v-model="query_data.entryState" size="large" placeholder="请选择参赛状态" clearable>
            <el-option label="待审核" :value="2"></el-option>
            <el-option label="待绑定" :value="3"></el-option>
            <el-option label="已绑定" :value="4"></el-option>
          </el-select>
          <el-button size="large" :icon="Search" circle :loading="loading" @click="() => handleLoad(true)" />
          <el-button type="primary" @click="handleOpenModal">添加参赛人员</el-button>
        </el-space>

      </div>
      <el-table :data="data" border style="width: 100%" v-loading="loading" empty-text="未查询到已报名参赛人员">
        <el-table-column label="学生ID" prop="studentId" width="80" />
        <el-table-column label="姓名" prop="studentName" width="100">
        </el-table-column>
        <el-table-column label="手机号码" prop="phone" width="120" />
        <el-table-column label="参赛证号" prop="entryNumber">
        </el-table-column>
        <el-table-column label="指导老师">
          <template #default="scope">
            <TeacherSelect :modelValue="scope.row.teacherId ? Number(scope.row.teacherId) : null"
              @change="(value) => { handleTecChange(value, scope.row) }">
            </TeacherSelect>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="
              成绩"
          prop="schoolName"
        />
        <el-table-column
          label="晋级"
          prop="createTime"
          width="180"
        /> -->
        <el-table-column label="参赛状态" prop="entryState" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.entryState == 0" type="info" size="small">
              禁用
            </el-tag>
            <el-tag v-else-if="scope.row.entryState == 1" type="danger" size="small">
              未报名
            </el-tag>
            <el-tag v-else-if="scope.row.entryState == 2" type="warning" size="small">
              待审核
            </el-tag>
            <el-tag v-else-if="scope.row.entryState == 3" type="primary" size="small">
              待绑定
            </el-tag>
            <el-tag v-else-if="scope.row.entryState == 4" type="success" size="small">
              已绑定
            </el-tag>

          </template>

        </el-table-column>
        <el-table-column label="操作" prop="Address" width="100">
          <template #default="scope">
            <el-dropdown trigger="click" @command="(value) => handleOperate(value, scope.row)"
              v-if="scope.row.entryState < 4">
              <span class="el_dropdown_link">
                操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="remove-join" v-if="scope.row.entryState == 2">
                    <el-icon>
                      <Delete />
                    </el-icon>撤销报名</el-dropdown-item>
                  <el-dropdown-item command="edit-id" v-if="scope.row.entryState == 3">
                    <el-icon>
                      <CircleClose />
                    </el-icon>填写ID码
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <template v-else>
              <el-button @click="handleOpenInfoModal(scope.row)">查看准考证</el-button>
            </template>
          </template>

        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background layout="prev, pager, next, total" :total="total" @current-change="handlePage" />
      </div>
      <NoJoinStudentsModal ref="NoJoinStudentsModalRef" :eventId="route.params.eventId"
        @closed="() => { handleLoad(true) }" />
    </div>
    <el-dialog title="激活" width="640px" v-model="edit_id_modal.show">
      <el-form label-width="96px">
        <el-form-item label="激活码">
          <el-input v-model="edit_id_modal.key" size="large" placeholder="请填写激活码" />
          <el-text>请输入激活码，激活码请向赛事组委会申请获得</el-text>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" @click="handleBindIdFroStudent">确认激活码</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <AdmissionTicketInfoModal />
  </div>
</template>

<script  setup>
import { usePage } from "@/hooks/usePage"
import { GetRegisteredStudentsApi, DeleteTeacherApi, GetEventInfoByEventIdApi, WithdrawalRegistrationApi } from "@/api/manage/institution"
import TeacherSelect from "@/components/teacher-select/index.vue"
import { ref, onMounted } from "vue"
import { Search, Delete } from "@element-plus/icons-vue"
import NoJoinStudentsModal from "./modal/no-join-students.vue"
import { useRoute, useRouter } from "vue-router"
import { ElMessage, ElMessageBox } from "element-plus"
import { BindingTeacherApi } from "@/api/common"
import { GetGroupsApi } from "@/api/manage/institution.js"
import { ActivationKeyApi } from "@/api"
import AdmissionTicketInfoModal from "@/components/admission-ticket-info-modal/index.vue"
import { open } from "@/utils/modal"
const route = useRoute();
const router = useRouter();
const NoJoinStudentsModalRef = ref();
const {
  total,
  data,
  loading,
  query_data,
  handleLoad,
  handlePage
} = usePage({
  api_fn: GetRegisteredStudentsApi,
  q_data: {
    studentName: '',
    phone: '',
    eventId: route.params.eventId,
    entryState: ""
  }
})
const no_join_modal_show = ref(false)
const handleOpenModal = () => {
  NoJoinStudentsModalRef.value.handleOpenModal();
}
const handleOperate = (command, row) => {
  if (command == 'edit-id') {
    edit_id_modal.value.key = "";
    edit_id_modal.value.studentId = row.studentId;
    edit_id_modal.value.show = true;
  } else if (command == 'remove-join') {
    // 撤销报名
    ElMessageBox.confirm('是否撤销报名？', "提示", {
      "cancel-button-text": "取消",
      "confirm-button-text": "确定",
      type: "warning"
    }).then(async () => {
      let res = await WithdrawalRegistrationApi({
        studentId: row.studentId,
        eventId: route.params.eventId,
        rootId: details_data.value.rootId
      })
      if (!res.success) {
        ElMessage.error(res.message);
      } else {
        ElMessage.success(res.message);
      }
      handleLoad(true)
    })

  }
}
const handleRest = () => {
  query_data.value.studentName = "";
  query_data.value.phone = "";
  handleLoad(true);

}
/**
 * 返回上一步
 */
const handleBack = () => {
  router.back();
}
// ------------------------- 获取详情
const details_data = ref({

})
const handleGetDetails = async () => {
  let res = await GetEventInfoByEventIdApi({
    eventId: route.params.eventId
  })
  if (res.success) {
    details_data.value = res.entity;
    handleGetGroups();
  }
}
const group_name = ref("-")

const handleGetGroups = async () => {
  let res = await GetGroupsApi();
  if (res.success) {
    let find = res.entityList.find((item) => {
      return item.groupId == details_data.value.groupId
    })
    if (find) {
      group_name.value = find.groupDescribe
    }
  }
}
// -------------------------id码
const edit_id_modal = ref({
  show: false,
  studentId: '',
  key: '',

})
/**
 * 绑定
 */
const handleBindIdFroStudent = async () => {
  let res = await ActivationKeyApi({
    studentId: edit_id_modal.value.studentId,
    key: edit_id_modal.value.key,
    eventId: route.params.eventId
  })
  if (res.success) {
    ElMessage.success(res.message)
    edit_id_modal.value.show = false;
    handleLoad(true);

  } else {
    ElMessage.error(res.message)
  }
}
// --------------------------------------------
/**
 * 切换指导老师
 */
const handleTecChange = async (value, row) => {
  let res = await BindingTeacherApi({
    studentId: row.studentId,
    teacherId: value,
    eventId: route.params.eventId
  })
  if (res.success) {
    ElMessage.success(res.message)
    row.teacherId = value;
  } else {
    ElMessage.error(res.message)
  }

}

const handleOpenInfoModal = (data) => {
  open('admission-ticket-info', {
    ...data,
    eventId: route.params.eventId
  })
}
onMounted(() => {
  handleLoad(true);
  handleGetDetails()
})
</script>

<style lang="scss" scoped>
.details-container {
  padding: 20px;
  box-sizing: border-box;

  .descriptions-container {}

  .content-container {
    .content-heder-container {
      padding: 16px 0;
      display: flex;
      align-content: center;
      justify-content: space-between;
    }

    .pagination-container {
      display: flex;
      justify-content: center;
      padding: 32px 0;
    }
  }
}
</style>